import { request } from '@/api/request';
import { Card, Descriptions, Tabs } from 'antd';
import { useEffect, useState } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { YmAddPageLayout } from 'ym-design';
import CarList from './CarList';
import DriverList from './DriverList';
const { PaneItem } = YmAddPageLayout;

type DetailType = {
  a1?: number;
  a2?: number;
  a3?: number;
  entName: string;
  entSafetyIndex: number;
  carSafetyIndex: number;
  driverSafetyIndex: number;
};
export default function () {
  const navigator = useNavigate();
  const [searchParam] = useSearchParams();
  const entId = searchParam.get('entId');
  const safetyIndexEntId = searchParam.get('safetyIndexEntId');
  const entName = searchParam.get('entName');
  const [detils, setDetils] = useState<DetailType>({
    entName: '',
    entSafetyIndex: 0,
    carSafetyIndex: 0,
    driverSafetyIndex: 0,
  });
  const TabChange = (key: string) => {
    console.log(key);
  };
  useEffect(() => {
    request<DetailType>({
      // method: 'get',
      url: '/unicron/ent/safetyIndex/entDetails',
      data: {
        safetyIndexEntId: safetyIndexEntId,
      },
    }).then((res: any) => {
      if (res.code == '200' && res.data) {
        // const res = {
        //   data: {
        //     entName: 'xxx',
        //     entSafetyIndex: 1,
        //     carSafetyIndex: 2,
        //     driverSafetyIndex: 3,
        //   },
        // };
        setDetils(res.data);
      }
    });
  }, [safetyIndexEntId]);

  return (
    <YmAddPageLayout
      leftOperation={{
        onBack: () => {
          navigator('/safeIndex/safeIndexStatistics/entIndex');
        },
      }}
    >
      <PaneItem tabKey="tab1" label={entName} forceRender={false}>
        <div style={{ height: '100%', overflow: 'auto' }}>
          <Card title="" style={{ marginBottom: 16 }}>
            <Descriptions layout="vertical" bordered size="middle" column={{ md: 4 }}>
              <Descriptions.Item label="企业安全指数">{detils.entSafetyIndex}</Descriptions.Item>
              <Descriptions.Item label={'车辆安全指数*' + detils.a1 + '%'}>
                {detils.carSafetyIndex} * {detils.a1} %
              </Descriptions.Item>
              <Descriptions.Item label={'司机安全指数*' + detils.a2 + '%'}>
                {detils.driverSafetyIndex} * {detils.a2} %
              </Descriptions.Item>
              <Descriptions.Item label={'企业安全管理指数*' + detils.a3 + '%'}>--</Descriptions.Item>
            </Descriptions>
          </Card>
          <Card style={{ marginBottom: 16 }}>
            <Tabs
              defaultActiveKey="1"
              onChange={TabChange}
              items={[
                {
                  label: '车辆安全指数',
                  key: '1',
                  children: <CarList entId={entId || ''}></CarList>,
                },
                {
                  label: '司机安全指数',
                  key: '2',
                  children: <DriverList entId={entId || ''}></DriverList>,
                },
              ]}
            />
          </Card>
        </div>
      </PaneItem>
    </YmAddPageLayout>
  );
}
